<template>
  <div>
    <ProductNav
      v-if="productDetail.detail"
      :title="productDetail.detail.title"
      :keywords="productDetail.detail.keywords"
      :options="['概述页', '参数页', '咨询客服', '用户评价']"
    ></ProductNav>
    <ProductDetail v-if="productDetail.detail" :product="productDetail"></ProductDetail>
  </div>
</template>
<script setup lang="ts">
import { shallowReactive } from '@vue/reactivity';
import { useRoute, useRouter } from 'vue-router';
import { getProductDetail } from '../api/productApi';
import ProductNav from '../components/product/ProductNav.vue';
import ProductDetail from '../components/product/ProductDetail.vue';

const route = useRoute();
const router = useRouter();
const { id } = route.params;
if (!id) router.back();

const productDetail = shallowReactive({
  detail: null as any,
});
getProductDetail({
  pro_no: id,
}).then((res) => {
  productDetail.detail = res.data;
});
</script>
<style scoped>
</style>